<template>
  <div class="tableBox" ref="tableRef">
    <div class="elTable" ref="elTableRef">
      <el-table
        ref="tableRef"
        tooltip-effect="light"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          background: 'rgba(48,112,249,0.05)',
          color: '#333333',
        }"
        :cell-style="handleCellStyle"
        :height="viewHeight"
        row-key="id"
        default-expand-all
      >
        <!--        表格列-->
        <template v-for="(column, index) in columns">
          <!--          序号列和选择列-->
          <el-table-column
            v-if="column.type && (column.type == 'selection' || column.type == 'index')"
            :width="column.width"
            :min-width="column.minWidth"
            :type="column.type"
            :label="column.label"
          ></el-table-column>
          <!--          数据列和操作-->
          <el-table-column
            v-else
            :key="column.align"
            :align="column.align"
            :label="column.label"
            :width="column.width"
            show-overflow-tooltip
            :fixed="column.fixed"
            :min-width="column.minWidth"
          >
            <template v-if="!column.type" #default="{ row, $index }">
              <!--              操作列-->
              <slot v-if="column.slot" :index="$index" :name="column.slot" :row="row" />
              <!--              数据列-->
              <span v-else>{{ row[column.prop] }}</span>
            </template>
          </el-table-column>
        </template>
        <div slot="empty" class="empty">
          <img src="../../../assets/img/table/noDataImg.png" alt="" />
        </div>
      </el-table>
    </div>

    <el-pagination
      ref="pagination"
      :current-page="pagination.pageNum"
      :page-size="pagination.pageSize"
      :page-sizes="[10, 20, 30]"
      :total="pagination.total"
      background
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>
<script setup>
import { nextTick, onMounted, ref, getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

const props = defineProps({
  columns: {
    type: Array,
    default: [],
  },
  tableData: {
    type: Array,
    default: [],
  },
  pagination: {
    type: Object,
    default(rawProps) {
      return {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      };
    },
  },
});
const viewHeight = ref(0);
const tableRef = ref(null);
const parentInstance = proxy.$parent;

const handleCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if ((rowIndex + 1) % 2 == 0) {
    return {
      background: `rgba(48, 112, 249, 0.05)`,
    };
  }
};

const handleSizeChange = (val) => {
  parentInstance.setSize(val);
};

const handleCurrentChange = (val) => {
  parentInstance.setPage(val);
};

onMounted(() => {
  nextTick(() => {
    viewHeight.value = tableRef.value.offsetHeight - 80;
  });
});
</script>
<style scoped lang="less">
.tableBox {
  display: flex;
  flex-direction: column;

  .elTable {
    box-sizing: border-box;
    flex: 1 1 auto;
    height: 0;
    padding: 0 24px;
    overflow: hidden;
  }

  .el-table {
    &::before {
      height: 0;
    }

    /deep/ .el-table__header-wrapper {
      .el-table__header {
        height: 62px;
      }

      .has-gutter {
        .gutter {
          border-bottom: 1px solid #ebeef5;
          background-color: rgba(48, 112, 249, 0.05);
        }
      }
    }

    /deep/ .el-table__body-wrapper {
      .el-table__row {
        height: 62px;

        .el-table__cell {
          color: var(--table-text-color);
        }

        &:hover {
          background-color: #e1eafe !important;

          .el-table__cell {
            background-color: #e1eafe !important;
          }
        }

        & > td {
          border-bottom: none;
        }
      }

      .el-button--text {
        color: #3070f9 !important;
      }
    }
  }

  .el-pagination {
    padding: 24px;
    display: flex;
    justify-content: flex-end;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 6px 6px;
  }
}
</style>